<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="物流批量审核"
    width="90%"
    draggable
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <div class="">
      <div class="mb-[8px]">
        <el-button @click="handleAudit(true)">全部通过</el-button>
        <el-button @click="handleAudit(false)">全部不通过</el-button>
      </div>
      <vxe-grid ref="tableRef" v-bind="tableOptions">
        <template #auditResult="{ row }">
          <el-radio-group v-model="row.review_opinion">
            <el-radio :label="true" @click.native.stop="handleCancel(row, true)"
              >通过</el-radio
            >
            <el-radio :label="false" @click.native.stop="handleCancel(row, false)"
              >未通过</el-radio
            >
          </el-radio-group>
        </template>
        <template #auditRemark="{ row }">
          <el-input
            v-model="row.review_remark"
            placeholder="请输入"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
          />
        </template>
      </vxe-grid>
    </div>
    <template #footer>
      <el-button @click="close">关闭</el-button>
      <el-button type="primary" :loading="loading" @click="handleSave"> 保存 </el-button>
    </template>
  </el-dialog>
</template>
<script setup name="LogisticsAudit" lang="jsx">
import { ElMessage } from "element-plus";
import { logisticsList, logisticsCheck } from "../api";
const visible = ref(false);
const loading = ref(false);
const emit = defineEmits(["refresh"]);
const load = ref(false);
const open = async (ids) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  getLogisticsList(ids);
  visible.value = true;
};
const getLogisticsList = (sku_ids) => {
  tableOptions.loading = true;
  logisticsList({ sku_ids })
    .then((res) => {
      tableOptions.data = res?.data || [];
    })
    .finally(() => {
      tableOptions.loading = false;
    });
};
const tableOptions = reactive({
  round: true,
  height: "600",
  autoHidden: true,
  columnConfig: {
    resizable: true,
  },
  loading: false,
  data: [],
  columns: [
    {
      title: "审核结果",
      field: "review_opinion",
      width: "80",
      fixed: "left",
      slots: { default: "auditResult" },
    },
    {
      title: "审核备注",
      field: "review_remark",
      width: "200",
      fixed: "left",
      slots: { default: "auditRemark" },
    },
    { title: "SKU", field: "sku", width: "100", fixed: "left" },
    {
      title: "供应商名称",
      field: "supplier_name",
      minWidth: "150",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <dataAuthority
                auth="supplier_name"
                value={row.supplier_name}
                default_value={row.supplier_code}
              ></dataAuthority>
            </div>
          );
        },
      },
    },
    { title: "中文报关名称", field: "cn_name", width: "110" },
    { title: "英文报关名称", field: "en_name", width: "110" },
    { title: "中文报关材质", field: "cn_material", width: "110" },
    { title: "英文报关材质", field: "en_material", width: "110" },
    { title: "海关编码", field: "customs_code", width: "90" },
    { title: "报关单位", field: "declare_unit", width: "90" },
    { title: "产品用途", field: "purpose", width: "100" },
    { title: "清关链接", field: "declare_link", width: "100" },
    { title: "链接销售价格", field: "declare_link_price_eur", width: "110" },
    { title: "清关价格", field: "declare_price_usd", width: "100" },
    { title: "退税率", field: "tax_rebate_rate", width: "100" },
    { title: "申报要素", field: "declare_elements", width: "100" },
  ],
});

const handleAudit = (val) => {
  const data = tableOptions.data;
  const result = data.every((item) => item.review_opinion === val);
  if (result) {
    ElMessage.warning(val ? "已全部通过" : "已全部不通过");
    return;
  }
  data.forEach((item) => {
    item.review_opinion = val;
  });
  tableOptions.data = [...data];
};

const handleSave = () => {
  const data = tableOptions.data;
  const params = data
    .filter(
      (item) =>
        item?.review_opinion !== undefined &&
        (item.review_opinion === true || item.review_opinion === false)
    )
    .map((it) => {
      return {
        sku_id: it.id,
        review_opinion: it.review_opinion,
        review_remark: it?.review_remark || null,
      };
    });
  if (!params.length) {
    ElMessage.warning("请先填写审核结果");
    return;
  }
  loading.value = true;
  logisticsCheck({ params: params })
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success(res.message);
        close(true);
      } else {
        ElMessage.warning(res.message);
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleCancel = (row, flage) => {
  if (row.review_opinion === flage) {
    setTimeout(() => {
      row.review_opinion = undefined;
    }, 0);
  }
};

const close = (refresh) => {
  if (refresh) emit("refresh");
  visible.value = false;
};
defineExpose({ open });
</script>
